<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法4:v-model双向绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点:v-model双向绑定</h1>
        <h3>我们可以使用v-model指令在表单input,textarea,select等元素上进行双向绑定
            它会根据控件类型自动选取正确的方法来更新元素,
            v-model会忽略所有表单元素的value、checked、selected等属性的初始值,
            它始终会将当前的JavaScript状态视为数据的正确来源
        </h3>
        <h3>1.单行文本框</h3>
        用户名: <input type="text" v-model="singleText"><br>
        输入的用户名是: {{singleText}}
        <h3>2.多行文本框</h3>
        个人简介<textarea name="" id="" v-model="multiText"></textarea>
        输入的个人简介是: {{multiText}}
        <h3>3.单选框</h3>
        <h4>单选框在实际中是不能单独使用的,一般是两个以上,要设置一个v-model统一的变量,
            注意就可以实现radiogroup的效果
        </h4>
        性别: <input type="radio" value="'M" v-model="radioValue">美女
        <input type="radio" value='F' v-model="radioValue">帅哥<br>
        输入的性别是: {{radioValue}}
        <h3>4.单个复选框: 常用true或false的选择</h3>
        <input type="checkbox" v-model="toggleValue">是否天生丽质人神共愤
        <br>
        选择的结果是: {{toggleValue}}
        <h3>5.多个复选框: 使用v-model接受数组类型的变量</h3>
        你认为你是个咋样的人:
        <input type="checkbox" value="漂亮" v-model="checkedValues">回眸一笑百媚生
        <input type="checkbox" value="纤细" v-model="checkedValues">体能能为掌上舞
        <input type="checkbox" value="侠义" v-model="checkedValues">路见不平一声吼
        <br>
        你选中的品质是：{{checkedValues.join(',')}}
        <h3>6.单项下拉框</h3>
        <select name="" id="" v-model="singleSelect">
            <option value="杭州">杭州</option>
            <option value="台州">台州</option>
            <option value="温州">温州</option>
            <option value="湖州">湖州</option>
        </select>
        <p>原来你是{{singleSelect}}来的啊!</p>
        <h3>7.多项选择框</h3>
        <select name="" id="" multiple v-model="multiSelect">
            <option value="a">吃饭</option>
            <option value="b">喝水</option>
            <option value="c">跳舞</option>
        </select>
        <p>你的选择有这些：{{multiSelect.join(',')}}</p>
        <button @click="submit()">tijiao</button>
        <h1>课堂小练习</h1>
        <h1>知识点2:v-model 修饰符</h1>
        <h3>1. .lazy 修饰符 v-model在每次input事件触发后输入框的数据与变量同步进行,添加lazy修饰符后,转变为change事件同步</h3>
        <input type="text" v-model.lazy="text">{{text}}
        <h3>2. .number 修饰符</h3>
        <input type="text" v-model.number="num">{{num+1}}
        <h3>3. .trim 修饰符  可以自动过滤前后的空格</h3>
        <input type="text" v-model.trim="text">{{text+"你好"}}
    </div>
</body>
</html>
<script>
    const connApp = Vue.createApp({
        data() {
            return {
                singleText:'我是初始值',
                multiText:'',
                radioValue:'',
                toggleValue:false,
                checkedValues:[],
                singleSelect:'',
                multiSelect:[],
                text:'',
                num:''
            }
        },
    }).mount("#app")
</script>
